<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title >部门表</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/6;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{getUserInfolistByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'depUuid',name : 'depUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : '部门名称',name : 'branchName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : '归属',name : 'belongCenter',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'userUuid',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var htmlContent = '<a href="#" onclick="deleteUser(\''+ v + '\')"><i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>';
                            return htmlContent
                        }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });
            queryBtn();

            $("#query-btn-id").click(function (event) {
                event.stopPropagation();
                queryBtn();


            })
            $("#add-user-info-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.info}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userName = $("#add-user-name-id").val();
                            var userPasswd = $("#add-user-passwd-id").val();
                            var userNick = $("#add-user-nick-id").val();
                            var userMobile = $("#add-user-mobile-id").val();
                            var userEmail = $("#add-user-email-id").val();
                            if(userName && userPasswd && userNick && userMobile && userEmail){
                                $.ajax({
                                        type: 'post',
                                        async: false,
                                        dataType : 'json',
                                        url: /*[[@{addUser}]]*/'',
                                        data: [
                                            {name:"userName",value:userName},
                                            {name:"userPasswd",value:userPasswd},
                                            {name:"userNick",value:userNick},
                                            {name:"userMobile",value:userMobile},
                                            {name:"userEmail",value:userEmail},
                                        ],
                                        success: function (data) {
                                            message(data.msg);
                                        },
                                        error: function(msg){
                                            message(/*[[#{common.error}]]*/'');
                                        }
                                    }
                                );
                                queryBtn();
                                $("#add-user-info-id").dialog( "close" );
                            }
                            else{
                                alert("必须全部填写！")
                            }
                        }
                    }
                ]
            });
            $("#confirm-user-del-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.delete.tip.titile}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid = $("#confirm-user-del-id").attr("userUuid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{deleteUserById}]]*/'',
                                data: [{name: "userUuid", value: userUuid}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#confirm-user-del-id").dialog( "close" );
                                    queryBtn();
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });
            $("#confirm-user-mod-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.info}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid = $("#confirm-user-mod-id").attr("userUuid");
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType: 'json',
                                url: /*[[@{deleteUserById}]]*/'',
                                data: [{name: "userUuid", value: userUuid}],
                                success: function (data) {
                                    message(data.msg);
                                    $("#confirm-user-del-id").dialog( "close" );
                                    queryBtn();
                                },
                                error: function (msg) {
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });

                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });

            $("#allocate-btn-id").click(function (event) {
                event.stopPropagation()
                //$("#allocate-dialog-id").dialog('open')
                allocateZtree();

            });


            $("#allocate-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.role.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var userUuid = $("#allocate-dialog-id").attr("userUUid");
                            var roleUuids = [];
                            var ztreeObj = $.fn.zTree.getZTreeObj("allocate-user-ztree");
                            var nodes = ztreeObj.getCheckedNodes(true);
                            $(nodes).each(function (index,item) {
                                roleUuids.push(item.id);
                            });

                            $.ajax({
                                    type: 'post',
                                    async: false,
                                    dataType : 'json',
                                    url: /*[[@{saveRoleByUserId}]]*/'',
                                    data: [
                                        {name:"userUuid",value:userUuid},
                                        {name:"roleUuids",value:roleUuids}
                                    ],
                                    success: function (data) {
                                        message(data.msg);
                                        $("#allocate-dialog-id").dialog('close');
                                    },
                                    error: function(msg){
                                        message(/*[[#{common.error}]]*/'');
                                    }
                                }
                            );



                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                ]
            });


        });//ready

        function queryBtn() {
            var searchUserName = $("#searchUserName").val();
            var searchNiceName = $("#searchNiceName").val();
            var searchPhone = $("#searchPhone").val();
            var searchEmail = $("#searchEmail").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"searchUserName",value:searchUserName},
                    {name:"searchNiceName",value:searchNiceName},
                    {name:"searchPhone",value:searchPhone},
                    {name:"searchEmail",value:searchEmail}
                ]
            }).flexReload();

        }
        function deleteUser(userUuid) {
            $("#confirm-user-del-id").attr("userUuid",userUuid + ',');
            $("#confirm-user-del-id").dialog('open');
        }
        function modifyUser(userUuid) {
            $("#confirm-user-mod-id").attr("userUuid",userUuid);
            // var columnsArray = $(this).parents('tr:first').attr('ch').split("_FG$SP_");
            var columnsArray = $(this).parent.parent.parent.attr('ch').split("_FG$SP_");
            // columnsArray.css({backgroundColor:'#d1eac8'});
            // alert(columnsArray)
            $("#mod-user-name-id").val(columnsArray[2]);
            $("#mod-user-nick-id").val(columnsArray[6]);
            $("#mod-user-mobile-id").val(columnsArray[5]);
            $("#mod-user-email-id").val(columnsArray[4]);
            $("#confirm-user-mod-id").dialog('open');
        }

        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        function allocateZtree() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
            if(ids.length !== 1){
                message(/*[[#{common.select.one}]]*/'');
                return;
            }

            $("#allocate-dialog-id").attr("userUUid",ids);

            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{getRoleZtreeListByUserId}]]*/'',
                    data: [{name:"userUuid",value:ids}],
                    success: function (data) {
                        $.fn.zTree.init($("#allocate-user-ztree"), allocateSetting, data);
                        $("#allocate-dialog-id").dialog('open');
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );

        }
        $("#user-detail-dialog-id").dialog({
            autoOpen : false,
            width : 400,
            modal : true,
            resizable : false,
            title: /*[[#{user.info}]]*/'',
            buttons: [
                {
                    text: /*[[#{common.confirm}]]*/'',
                    click: function() {
                        $( this ).dialog( "close" );
                    }
                }
            ]
        });


        function rowDbclick(r){
            $(r).dblclick(
                function() {
                    var columnsArray = $(r).attr('ch').split("_FG$SP_");
                    console.info(columnsArray);
                    $("#detail-user-name-id").text(columnsArray[2]);
                    $("#detail-user-nick-id").text(columnsArray[6]);
                    $("#detail-user-mobile-id").text(columnsArray[5]);
                    $("#detail-user-email-id").text(columnsArray[4]);
                    // $("#user-detail-dialog-id").dialog("close");
                    $("#user-detail-dialog-id").dialog({
                        buttons: [
                            {
                                text: "Ok",
                                icons: {
                                    primary: "ui-icon-heart"
                                },
                                click: function() {
                                    $( this ).dialog("close");
                                }
                            }
                        ]
                    });
                });
        }

        function checkedDelete(){
            var chk_value =[];
            $("tr.trSelected").each(function(){
                // alert($(this))
                chk_value.push($(this).attr('ch').split("_FG$SP_")[0]);
            });
            var selectId = chk_value.join(",");
            // alert(selectId)
            deleteUser(selectId);
        }
        function addUser(){
            $("#add-user-info-id").dialog('open');
        }





    </script>
</head>
<body>
<div>
    <span th:text="#{depa.info}"></span>
<!--    <div>-->
<!--        <label  th:text="#{user.name}"></label> <input type="text" id="searchUserName"/>-->
<!--        <label  th:text="#{user.nick}"></label> <input type="text" id="searchNiceName"/>-->
<!--        <label  th:text="#{user.mobile}"></label> <input type="text" id="searchPhone"/>-->
<!--        <label th:text="#{user.email}"></label> <input type="text" id="searchEmail"/>-->
<!--        <a  class="btn" href="#" onclick="queryBtn();">-->
<!--            <i class="glyphicon glyphicon-zoom-in"></i>-->
<!--            <span th:text="#{common.query}"></span>-->
<!--        </a>-->
<!--    </div>-->


    <!--    <input type="text" id="search-user-name-id" th:placeholder="#{user.name}">-->
    <!--    <a href="#" id="query-btn-id" class="navbar-btn">-->
    <!--        <i class="glyphicon glyphicon-zoom-in"></i>-->
    <!--        <span th:text="#{common.query}"></span>-->
    <!--    </a>-->
    <!--    <a href="#" id="allocate-btn-id" class="navbar-btn">-->
    <!--        <i class="glyphicon glyphicon-tower"></i>-->
    <!--        <span th:text="#{user.role.allocate}"></span>-->
    <!--    </a>-->
    <div>
        <ul class="nav navbar-nav fa-ul" >
            <li sec:authorize="hasRole('ROLE_cldk_data_user_add')">
                <a href="#" onclick="addUser()">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span th:text="#{common.add}"></span>
                </a>
            </li>

            <li sec:authorize="hasRole('ROLE_cldk_data_user_del')">
                <a href="#" onclick="checkedDelete()">
                    <i class="glyphicon glyphicon-minus"></i>
                    <span th:text="#{common.delete}"></span>
                </a>
            </li>
            <li sec:authorize="hasRole('ROLE_cldk_data_user_role')">
                <a href="#" onclick="allocateZtree();">
                    <i class="glyphicon glyphicon-wrench"></i>
                    <span th:text="#{user.role.allocate}"></span>
                </a>
            </li>
        </ul>
    </div>

</div>

<table id="flexigrid-id"></table>
<div id="confirm-user-del-id" style="display: none">
    <span th:text="#{user.delete.tip.info}"></span>
</div>


<div id="allocate-dialog-id" style="display: none">
    <ul id="allocate-user-ztree" class="ztree">

    </ul>

</div>
<!--<div  id="user-detail-dialog-id" style="display: none">-->
<!--    <div>-->
<!--        <span th:text="#{user.name}"></span>:-->
<!--        <span id="detail-user-name-id"></span>-->
<!--    </div>-->
<!--    <div>-->
<!--        <span th:text="#{user.nick}"></span>:-->
<!--        <span id="detail-user-nick-id"></span>-->
<!--    </div>-->
<!--    <div>-->
<!--        <span th:text="#{user.mobile}"></span>:-->
<!--        <span id="detail-user-mobile-id"></span>-->
<!--    </div>-->
<!--    <div>-->
<!--        <span th:text="#{user.email}"></span>:-->
<!--        <span id="detail-user-email-id"></span>-->
<!--    </div>-->
<!--</div>-->

<!--<div  id="add-user-info-id" style="display: none">-->
<!--    <div>-->
<!--        <span th:text="#{user.name}"></span>:-->
<!--        <input id="add-user-name-id">-->
<!--    </div>-->
<!--    <div>-->
<!--        <span th:text="#{user.passwd}"></span>:-->
<!--        <input id="add-user-passwd-id">-->
<!--    </div>-->
<!--    <div>-->
<!--        <span th:text="#{user.nick}"></span>:-->
<!--        <input id="add-user-nick-id">-->
<!--    </div>-->
<!--    <div>-->
<!--        <span th:text="#{user.mobile}"></span>:-->
<!--        <input id="add-user-mobile-id">-->
<!--    </div>-->
<!--    <div>-->
<!--        <span th:text="#{user.email}"></span>:-->
<!--        <input id="add-user-email-id">-->
<!--    </div>-->
<!--</div>-->

</body>
</html>